﻿<{include file="header.htm"}>

    <div class="width_zw">
        <div class="position">在线选座</div>
        <div class="zw_content">
            <{foreach item=vv key=key from=$seat}>
            <ul>
                <{foreach item=v key=k from=$vv.seat}>
                <span>
                    <{foreach item=seat key = kk from=$v}>
                    <{if in_array($vv.price,$price_list)}>
                            <{assign var=row value=$vv.row[$k] }>
                            <{assign var=cols value=$kk+1 }>
                            <{assign var=model_id value=$vv.id}>
                            <{assign var=new_seat value=$model_id,$row,$cols}>

                               <{if in_array($new_seat,$ch_buy_seat)}>
                               <li><a href="javascript:void(0);" title="<{$vv.model_name}>&nbsp;<{$row}>排<{$cols}>号"><img class="c_img" src="<{$config.weburl}>/templates/default/images/disabled.jpg"/> </a>  </li>
                                    <{else}>
                               <li class="select_zw" data-row="<{$vv.row[$k]}>" data-seat="<{$kk+1}>" data-model="<{$vv.model_name}>" data-price="<{$vv.price}>" data-model-id="<{$vv.id}>" data-id="<{$key+1}>" ><a href="javascript:void(0);" title="<{$vv.model_name}>&nbsp;<{$row}>排<{$cols}>号"><img class="c_img" src="<{$config.weburl}>/templates/default/images/level<{$key+1}>.jpg"/> </a>  </li>
                                <{/if}>


                    <{else}>
                <li><a href="javascript:void(0);" title="<{$vv.model_name}>&nbsp;<{$vv.row[$k]}>排<{$kk+1}>号"><img src="<{$config.weburl}>/templates/default/images/disabled.jpg"/> </a>  </li>
                 <{/if}>
                  <{/foreach}>
                <div class="clear_float"></div>
                </span>
                <{/foreach}>

            </ul>
            <{/foreach}>

            <div class="zw_des">
                <span>图标详情</span>
                <{foreach item=vv key=key from=$seat_other}>
                <dl>
                    <dt><img src="<{$config.weburl}>/templates/default/images/level<{$key+1}>.jpg"/></dt>
                    <dd> <{$vv.model_name}>  &nbsp;&nbsp; <{$vv.price}>元</dd>
                </dl>
                <{/foreach}>
                <dl>
                    <dt><img src="<{$config.weburl}>/templates/default/images/disabled.jpg"/></dt>
                    <dd>已售罄</dd>
                </dl>

                <dl>
                    <dt><img src="<{$config.weburl}>/templates/default/images/incart.jpg"/></dt>
                    <dd>已选中</dd>
                </dl>
                <div class="clear_float"></div>
            </div>
        </div>

        <div class="zw_order" style="display: none;">
            <form action="<{$config.weburl}>/?m=product&s=shop_order" method="post" id="my_form">
                <input type="hidden" name="spot" value="<{$param.spot}>" />
                <input type="hidden" name="pid" value="<{$param.pid}>" />
                <{foreach item=list from=$product_list}>
                <input type="hidden" name="item[]" value="<{$list.performance_start_time}>,<{$list.price}>" />
                <{/foreach}>
                <div id="on_select"> </div>
            <ul>
                <li>座位号</li>
                <li>类别</li>
                <li>票价</li>
            </ul>
            <div class="clear_float"></div>
            <div class="product_list" id="product_list">

            </div>
            <button id="submit">去结算</button>
            </form>
        </div>
        <div class="clear_float"></div>

    </div>
<script type="application/javascript">

    $(".select_zw").on("click",function(){
        var model_name = $(this).attr("data-model");
        var data_row = $(this).attr("data-row");
        var data_seat = $(this).attr("data-seat");
        var data_price = $(this).attr("data-price");
        var model_id = $(this).attr("data-model-id");
        var data_id = $(this).attr("data-id");
        var span_html = '<span id="'+model_id+data_row+data_seat+'" data-id="'+data_id+'">'+
                        '<a href="javascript:void(0);">'+data_row+'排'+data_seat+'座</a>'+
                        '<a href="javascript:void(0);">'+model_name+'</a>'+
                        '<a href="javascript:void(0);"><em>￥</em>'+data_price+'</a>';
        $("#product_list").parent().parent().show(3);
        if($(this).hasClass("on")){
            $("#"+model_id+data_row+data_seat).hide();
            $("#s"+model_id+data_row+data_seat).attr('disabled','disabled');
            $("#p"+model_id+data_row+data_seat).attr('disabled','disabled');
            $(this).removeClass("on");
            $(this).find(".c_img").attr("src","<{$config.weburl}>/templates/default/images/level"+data_id+".jpg");
        } else {
            $(this).find(".c_img").attr("src","<{$config.weburl}>/templates/default/images/incart.jpg");
            $(this).addClass('on');
            if($("#s"+model_id+data_row+data_seat).attr('disabled') == undefined){
                $("#product_list").append(span_html);
                var html_input='<input type="hidden" name=seat[] value="'+model_id+','+data_row+','+data_seat+'" id="'+'s'+model_id+data_row+data_seat+'" /> ';
                var html_input_price='<input type="hidden" name=price[] value="'+data_price+'" id="'+'p'+model_id+data_row+data_seat+'" /> ';
                $("#on_select").append(html_input);
                $("#on_select").append(html_input_price);
            } else {
                $("#"+model_id+data_row+data_seat).show();
                $("#s"+model_id+data_row+data_seat).removeAttr('disabled');
                $("#p"+model_id+data_row+data_seat).removeAttr('disabled');

            }
        }
    });

    $("#submit").on("click",function(){
        $("#my_form").submit();
    });



</script>

<style type="text/css">
    .width_zw{ width: 1200px; margin: auto; margin-top: 10px;border: 1px solid #eaeceb;}
    .width_zw .position{padding: 12px 20px 14px 20px; zoom: 1; background: #f0f0f0;}
    .width_zw .zw_content{ width: 900px; float: left;}
    .width_zw .zw_content ul{ padding: 10px 20px; height: auto;}
    .width_zw .zw_content ul span{ display: block;}
    .width_zw .zw_content ul li{ float: left; margin-right: 8px; cursor: pointer;}
    .width_zw .zw_content .zw_des{ display: block; margin: 20px 0px;}
    .width_zw .zw_content .zw_des span{ display:block; padding: 12px 20px 14px 20px; background: #f0f0f0;}
    .width_zw .zw_content .zw_des dl{ margin: 10px 0px;}
    .width_zw .zw_content .zw_des dl dt{ float: left; padding: 0px 10px;}


    .zw_order{ width: 299px; height: auto; margin: 12px 0px; float: left; border-left: 1px solid #eaeceb; border-top: 1px solid #eaeceb; border-bottom: 1px solid #eaeceb;}
    .zw_order ul{ display: block; padding: 0px 10px;}
    .zw_order ul li{ float: left; width: 33.3%; height: 30px; line-height: 30px; text-align: center; color: #666;}
    .zw_order .product_list{display: block; padding: 0px 10px;}
    .zw_order .product_list span{ display: block;}
    .zw_order .product_list span a{ display: block; float: left; width: 33.3%; height: 30px; line-height: 30px; text-align: center; color: #666;}
    .zw_order .product_list span a em{ font-weight: normal; color:red;}
    .zw_order button{ display: block; cursor: pointer; width: 150px;  height:30px; margin: auto; border: none; background: #f96c02; color: #fff; border-radius: 10px; margin-bottom: 20px;}
    .clear_float{ margin: 0px; padding: 0px; clear: both; height: 0px; line-height: 0px;}
</style>
<{include file="footer.htm"}>

